<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page import="com.fjrcloud.entity.Formalities" contentType="text/html;charset=UTF-8" %>
<%@ page import="com.fjrcloud.entity.Land" %>

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>附属物</title>

    <link rel="shortcut icon" href="favicon.ico"> <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="../css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">
    <link href="../plugins/jquery-ui-1.12.1/jquery-ui.min.css" rel="stylesheet">

    <style>
        table{
            margin-left: auto;
            margin-right: auto;
        }
        table td{
            width: 12.5%;
            height: 4rem;
            line-height: 20px;
            text-align: center;
            padding-left: 10px;
            padding-right: 10px;
        }
        table,tr,td{border:solid 1px;}
        table thead tr{border-color:rgba(255,255,255,0)}

        table td.title{
            background: #e7eaec;
        }
        table tbody tr[data-id]:hover {
            background-color: #edf5fa;
            cursor: pointer;
        }
        .nested-panel table,
        .nested-panel tr,
        .nested-panel td {
            border: 0;
        }

        .nested-panel td {
            border-top: solid 1px;
            border-right: solid 1px;
        }

        .nested-panel thead td {
            border-top: 0;
        }

        .nested-panel tr td:last-child {
            border-right: 0;
        }
        @media print {
            .not-print{ display:none;}
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInUp">
        <div class="row">
            <div class="col-sm-12">

                <div class="ibox">
                    <div class="ibox-title not-print">
                        <h5>土地信息</h5>
                        <div class="ibox-tools">
                            <button class="btn btn-primary btn-xs add" disabled>添加</button>
                            <button class="btn btn-primary btn-xs open"><i class="fa fa-user"></i></button>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <table id="content" data-id="">
                                    <thead>
                                        <tr>
                                            <th colspan="4" style="text-align: center;"><h1>土地认证补偿表</h1></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>档案号</td>
                                        <td class="master-code"></td>
                                        <td>土地坐落</td>
                                        <td class="master-addr"></td>
                                    </tr>
                                    <tr>
                                        <td>被征收人</td>
                                        <td class="master-name"></td>
                                        <td>身份证号</td>
                                        <td class="master-idNo"></td>
                                    </tr>
                                    </tbody>
                                    <tbody>
                                        <tr>
                                            <td colspan="4" class="nested-panel" style="padding: 0;">
                                                <table style="width: 100%;">
                                                    <thead>
                                                        <tr>
                                                            <td class="title">附属物</td>
                                                            <td class="title">金额</td>
                                                            <td class="title">备注</td>
                                                        </tr>
                                                    </thead>
                                                    <tbody class="data-tbody">
                                                        <tr>
                                                            <td></td>
                                                            <td></td>
                                                            <td></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 全局js -->
    <script src="../js/jquery.min.js?v=2.1.4"></script>
    <script src="../js/bootstrap.min.js?v=3.3.6"></script>
    <!-- 自定义js -->
    <%--<script src="../js/content.js?v=1.0.0"></script>--%>
    <!-- iCheck -->
    <script src="../js/plugins/iCheck/icheck.min.js"></script>
    <script src="../js/plugins/layer/layer.min.js"></script>
    <script src="../js/plugins/jsKnob/jquery.knob.js"></script>
    <script src="../js/jquery.form.js"></script>
    <script src="../js/date.extension.js"></script>
    <script src="../js/business.js"></script>

    <script src="../plugins/jquery-ui-1.12.1/jquery-ui.min.js"></script>
    <script>
        var methods = business('${path}','${result_success}');

        function updateHtml(result){

            $('#content').attr('data-id',result.master.id);
            $('.master-code').text(result.master.code);
            $('.master-addr').text(result.master.collectAddress);
            $('.master-name').text(result.master.name);
            $('.master-idNo').text(result.master.idNo);

            $('.data-tbody').html('');
            $(result.appendages).each(function () {
                $('.data-tbody').append('\
                    <tr data-id="'+this.id+'">\
                        <td>'+this.name+'</td>\
                        <td>'+this.amount+'</td>\
                        <td>'+this.description+'</td>\
                    </tr>');
            });

        }
        function addHtml() {
            var html ='\
                    <div class="ibox-content" style="overflow: hidden;height: 100%;">\
                        <form class="form-horizontal" method="post">\
                            <input type="text" name="id" style="display: none;">\
                            <input type="text" name="masterId" style="display: none;">\
                            <div class="form-group">\
                                <label class="col-sm-2 control-label">名称：</label>\
                                <div class="col-sm-10"><input type="text" class="form-control" name="name"></div>\
                            </div>\
                            <div class="form-group">\
                                <label class="col-sm-2 control-label">价值：</label>\
                                <div class="col-sm-10">\
                                    <div class="input-group">\
                                        <input type="number" min=0 class="form-control" name="amount"> <span class="input-group-addon">元</span>\
                                    </div>\
                                </div>\
                            </div>\
                            <div class="form-group">\
                                <label class="col-sm-2 control-label">描述：</label>\
                                <div class="col-sm-10">\
                                    <textarea class="form-control" style="resize:none" name="description"></textarea>\
                                </div>\
                            </div>\
                        </form>\
                    </div>';

            return html;
        }
        $(document).ready(function () {
            $('.open').click(function () {

                var dialog = methods.household().dialog();
                layer.open({
                    title:'档案查询',
                    type: 1,
                    area: ['600px','auto'],
                    content: dialog.html,
                    btn:['查看','取消'],
                    success:function (layero, index) {
                        dialog.init(layero);
                    },
                    yes: function(index, layero){
                        var master = dialog.result();
                        if($.isEmptyObject(master)){
                            layer.msg("未查询到唯一的结果，请详细填写查询条件");
                        }else{
                            layer.close(index);
                            //加载层-默认风格
                            layer.load();
                            methods.result(master,function (result) {
                                layer.closeAll('loading');
                                updateHtml(result);
                                $('button').removeAttr('disabled');
                            });
                        }
                    }
                });
            });

            $('.add').click(function () {

                layer.open({
                    title:'添加',
                    type: 1,
                    area: ['600px','auto'],
                    content: addHtml(),
                    btn:['确定','取消'],
                    success:function (layero, index) {
                        $(layero).find('input[name="masterId"]').val($('#content').attr('data-id'));
                    },
                    yes: function(index, layero){
                        var options ={
                            type: "post",
                            url: "${path}/api/housing/appendages/save",
                            dataType: "json",
                            uploadProgress: function (event, position, total, percentComplete) {},
                            success: function (result) {
                                if (result.code == "${result_success}") {
                                    layer.msg("保存成功");
                                    layer.close(index);
                                    //加载层-默认风格
                                    layer.load();
                                    methods.result(result.data.master,function (result) {
                                        layer.closeAll('loading');
                                        updateHtml(result);
                                        $('button').removeAttr('disabled');
                                    });
                                }else {
                                    layer.msg(result.data);
                                }
                            }
                        };

                        $(layero).find('form').ajaxSubmit(options);

                        layer.close(index);
                    }
                });
            });
            $('#content table tbody').on('click','tr',function () {
                var id = $(this).attr('data-id');
                methods.post('/api/housing/appendages/get',{id:id},function (result) {
                    console.log(result);
                    layer.open({
                        title:'添加',
                        type: 1,
                        area: ['600px','auto'],
                        content: addHtml(),
                        btn:['确定','取消'],
                        success:function (layero, index) {
                            $(layero).find('input[name="masterId"]').val(result.master.id);
                            $(layero).find('input[name="id"]').val(result.id);
                            $(layero).find('input[name="name"]').val(result.name);
                            $(layero).find('input[name="amount"]').val(result.amount);
                            $(layero).find('textarea[name="description"]').val(result.description);
                        },
                        yes: function(index, layero){
                            var options ={
                                type: "post",
                                url: "${path}/api/housing/appendages/save",
                                dataType: "json",
                                uploadProgress: function (event, position, total, percentComplete) {},
                                success: function (result) {
                                    if (result.code == "${result_success}") {
                                        layer.msg("保存成功");
                                        layer.close(index);
                                        //加载层-默认风格
                                        layer.load();
                                        methods.result(result.data.master,function (result) {
                                            layer.closeAll('loading');
                                            updateHtml(result);
                                            $('button').removeAttr('disabled');
                                        });
                                    }else {
                                        layer.msg(result.data);
                                    }
                                }
                            };

                            $(layero).find('form').ajaxSubmit(options);

                            layer.close(index);
                        }
                    });
                });
            });
        });
    </script>

</body>

</html>
